<template>
	<view class="detailedInformation_box">
		<view class="other_box" v-if="details.info.userId&&userInfo.identity==1&&details.info.userId!=userInfo.id">
			<view class="lf lf-center">
				<image class="other_accounts_img" :src="details.info.avatar"></image>
				<view class="">
					<view class="other_name">{{details.info.realName}} | {{details.info.nickName}}</view>
					<view class="xjs-size-24 account_num">
						手机号：{{details.info.phone}}
					</view>
				</view>
			</view>
		</view>
		<view class="detailed_status_box">
			<view class="bank_box">
				<image class="bank_img" :src="details.info.receiverBankLogo"></image>
				<view class="detailed_type">提现到{{details.info.receiverBankName}}(*****{{details.info.hBankAccount}})</view>
			</view>
			<view class="detailed_money" >¥{{details.info.amount}}</view>
		</view>
		<view class="detailed_detail">
			<view class="label_box">
				<text class="label_text">提现状态</text>
				<view class="value_box" v-if="details.info.tradeStatus==0||details.info.tradeStatus==1">待审核</view>
				<view class="value_box" v-if="details.info.tradeStatus==2">提现成功</view>
				<view class="value_box" v-if="details.info.tradeStatus==3">提现失败</view>
			</view>
			<view class="label_box">
				<text class="label_text">提现单号</text>
				<view class="value_box">
					<text class="order_no">{{details.info.id}}</text>
					<view class="copy_btn" @click="onCopy(details.info.id)">复制</view>
				</view>
			</view>
			<view class="label_box">
				<text class="label_text">提现时间</text>
				<view class="value_box">{{details.info.createTime}}</view>
			</view>
			<view class="label_box">
				<text class="label_text">提现银行</text>
				<view class="value_box">{{details.info.receiverBankName}}</view>
			</view>
			<view class="label_box">
				<text class="label_text">银行账号</text>
				<view class="value_box">{{details.info.receiverBankAccount}}</view>
			</view>
			<view class="label_box" v-if="details.info.tradeStatus!=0">
				<text class="label_text">审核时间</text>
				<view class="value_box">{{details.info.handleTime}}</view>
			</view>
			<view class="label_box" v-if="details.info.tradeStatus==3&&details.info.rejectReason">
				<text class="label_text">失败原因</text>
				<view class="value_box">{{details.info.rejectReason}}</view>
			</view>
		</view>
		<view class="bottom_btn" v-if="details.info.tradeStatus=='0'&&details.info.userId&&userInfo.identity=='1'">
			<view @tap="failBtn" class="xjs-btn-primary-plain xjs-ml-32 xjs-mr-16">提现失败</view>
			<view @tap="successBtn" class="xjs-btn-primary xjs-mr-32">提现成功</view>
		</view>
		<uni-popup ref="popupRef" type="center" :is-mask-click="false">
			<view class="unbind_pop">
				<view class="pop_title">确定提现成功吗？</view>
				<view class="unbind_text linehei1">请确认是否已打款给成员</view>
				<view class="pop_footer_btn">
					<view class="cancel_btn" @click="btnCancel()">取消</view>
					<view @click="handleConfig" class="xjs-btn-primary confirm_btn">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad ,onShow,onReachBottom} from '@dcloudio/uni-app'
	import { useUserStoreToRefs } from "@/store/useUserStore";
	let { userInfo } = useUserStoreToRefs();
	import api from '@/api'
	let details = reactive<any>({
		id: '',
		type:'',
		info: {}
	})
	const popupRef = ref()
	const failBtn = () => {
		uni.navigateTo({
			url: '/pages/income/refuse/index?id='+details.id
		})
	}
	const successBtn = async () => {
		popupRef.value.open()
	}
	const btnCancel = async () => {
		popupRef.value.close()
	}
	const handleConfig = async () => {
		 const res: any = await api({
			method: 'put',
			url: `/mall/studio/studio-balance-withdraw-record-new/success`,
			data:{
				id:details.id
			}
		 })
		 if(res.code==0){
			 uni.showToast({
			 	title: '提现成功',
			 	icon: 'none'
			 })
			 getDateils()
		 }
		popupRef.value.close()
	}
	const getDateils = async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/studio-balance-withdraw-record-new/${details.id}`,
		})
		details.info = res.data
		details.info.receiverBankName = res.data.receiverBankName.split(',')[0]
		details.info.hBankAccount = details.info.receiverBankAccount.substring(details.info.receiverBankAccount.length-4)
	}
	const onCopy = (id) => {
		uni.setClipboardData({
			data: id
		})
	}
	onShow(() => {
		getDateils()
	})
	onLoad((option) => {
		details.type = option.type
		details.id = option.id
	})
</script>
<style scoped lang="scss">
	.lf {
		display: flex;
	}
	.lf-between {
		justify-content: space-between;
	}
	.lf-center {
		align-items: center;
	}
	.lf-around {
		justify-content: space-around;
	}
	.other_box{
		background-color: #ffffff;
		border-radius: 24rpx;
		width: 672rpx;
		margin: 32rpx auto;
		padding-bottom: 32rpx;
		.other_accounts_img{
			margin: 32rpx 32rpx 0 24rpx;
			width: 84rpx;
			height: 84rpx;
			border-radius: 42rpx;
		}
		.other_name{
			margin-top: 20rpx;
			font-size: 30rpx;
		}
	}
	.bottom_btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 110rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		padding-top: 16rpx;
		padding-bottom: calc(var(--safe-area-bottom));
	}
	.unbind_pop {
		width: 622rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 64rpx 40rpx;
		box-sizing: border-box;
		text-align: center;
		.pop_title {
			font-weight: 500;
			font-size: 40rpx;
			color: #1B2120;
		}
		.unbind_text {
			margin-top: 48rpx;
			font-size: 30rpx;
			color: #1B2120;
		}
		.pop_footer_btn {
			display: flex;
			justify-content: space-between;
			margin-top: 48rpx;
			.cancel_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 263rpx;
				height: 88rpx;
				background-color: #FFFFFF;
				border-radius: 44rpx;
				border: 2rpx solid #FF6084;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF6084;
			}
			.confirm_btn {
				width: 263rpx;
				height: 88rpx;
			}
		}
	}
	.bank_box {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bank_img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}

	.detailedInformation_box {
		padding: 32rpx;
		box-sizing: border-box;

		.detailed_status_box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 48rpx 0;
			text-align: center;

			.detailed_type {
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
			}

			.detailed_money {
				font-weight: bold;
				font-size: 56rpx;
				color: #1B2120;
				margin-top: 48rpx;
			}

			.reduce_color {
				color: #6363FF;
			}
		}

		.detailed_detail {
			margin-top: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.label_box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 48rpx;

				.label_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}

				.value_box {
					display: flex;
					flex-direction: row;
					font-weight: 400;
					font-size: 28rpx;
					color: #1A1A1A;
					max-width: 480rpx;
					word-break: break-all;
					text-align: right;

					.order_no {}

					.copy_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 82rpx;
						height: 40rpx;
						background: var(--color-primary);
						border-radius: 38rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
					}
				}
			}

			.label_box:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>